import {useSelector, useDispatch} from "react-redux";
import {increment, decrement} from "./store/modules/counterStore";
import './App.css'
import {useEffect} from "react";
import {getChannelList} from "./store/modules/channelStore";

export const App = () => {
    const {count} = useSelector(state => state.counter);
    //channelList 是channelStore中initialState的属性名,channel是store中reducer的属性名
    const {channelList} = useSelector(state => state.channel);
    const dispatch = useDispatch();

    // 在组件挂载时触发异步请求
    useEffect(() => {
        dispatch(getChannelList())
    }, [dispatch]);
    return (
        <div>
            <h2>this is app</h2>
            <button onClick={() => {
                dispatch(increment(10))
            }}>+ 10
            </button>
            <span>{count}</span>
            <button onClick={() => {
                dispatch(decrement(20))
            }}>- 20
            </button>
            <br/>
            <ul>
                {channelList.map(item => <li key={item.id}>{item.name}</li>)}
            </ul>
        </div>
    )
}
